<template>
    <div class="content-wrapper-view">
		<div class="add_goods">
            
            <el-row class="body">
                <el-col :span="24">
                    <el-row>
                        <el-col :span="24">
                            <el-row>
                                <el-col :span="18">
                                    <el-tabs v-model="activeName" @tab-click="handleClick">
                                        <el-tab-pane label="商品基本信息" name="first">
                                            <el-row class="body">
                                                <el-col>
                                                    <el-form :inline="false" :model="form" ref="form" :rules="rules" v-loading="loading" label-width="80px" class="cms-form">

                                                        <el-form-item label="商品名称" prop="name" >
                                                            <el-input v-model="form.name" placeholder="商品名称"></el-input>
                                                        </el-form-item>

                                                        <el-form-item label="商品简述">
                                                            <el-input
                                                                    type="textarea"
                                                                    :autosize="{ minRows: 3, maxRows: 3}"
                                                                    placeholder="请输入商品简述"
                                                                    v-model="form.sketch">
                                                            </el-input>
                                                        </el-form-item>

                                                        <el-row :gutter="20">
                                                            <el-col :span="24">
                                                                <el-form-item label="商品标签">
                                                                    <el-select
                                                                        v-model="form.tagIds"
                                                                        multiple
                                                                        filterable
                                                                        allow-create
                                                                        default-first-option
                                                                        remote
                                                                        reserve-keyword
                                                                        @change="handleChangeTags"
                                                                        :remote-method="remoteMethod"
                                                                        :loading="loadingGetTags"
                                                                        placeholder="请选择文章标签"
                                                                        style="width: 100%">
                                                                            <el-option
                                                                            v-for="item in tagOptions"
                                                                            :key="item.id"
                                                                            :label="item.name"
                                                                            :value="item.id">
                                                                            </el-option>
                                                                    </el-select>
                                                                </el-form-item>
                                                            </el-col>
                                                        </el-row>
                                                        
                                                        <el-row :gutter="20">
                                                            <el-col :span="8">
                                                                <el-form-item label="销售价">
                                                                    <el-input-number style="width: 100%;" v-model="form.price" controls-position="right" :precision="2" :step="0.1" :min="0.00"></el-input-number>
                                                                </el-form-item>
                                                            </el-col>
                                                            <el-col :span="8">
                                                                <el-form-item label="市场价">
                                                                    <el-input-number style="width: 100%;" v-model="form.marketPrice" controls-position="right" :precision="2" :step="0.1" :min="0.00"></el-input-number>
                                                                </el-form-item>
                                                            </el-col>
                                                            <el-col :span="8">
                                                                <el-form-item label="总库存">
                                                                    <el-input-number style="width: 100%;" v-model="form.stock" controls-position="right" :min="0"></el-input-number>
                                                                </el-form-item>
                                                            </el-col>
                                                        </el-row>

                                                        <el-row :gutter="20">
                                                            <el-col :span="8">
                                                                <el-form-item label="商品分类">
                                                                    <el-cascader
                                                                        clearable
                                                                        :props="defaultProps"
                                                                        :options="categoryOptions"
                                                                        v-model="categoryIds"
                                                                        @change="handleChangeCascader"
                                                                        placeholder="请选择" style="width: 100%"
                                                                        >
                                                                    </el-cascader>
                                                                </el-form-item>
                                                            </el-col>
                                                            <el-col :span="8">
                                                                <el-form-item label="商品类型">
                                                                    <el-select v-model="form.typeId" clearable placeholder="请选择" style="width: 100%">
                                                                        <el-option
                                                                                v-for="item in typeOptions"
                                                                                :key="item.id"
                                                                                :label="item.name"
                                                                                :value="item.id">
                                                                        </el-option>
                                                                    </el-select>
                                                                </el-form-item>
                                                            </el-col>
                                                            <el-col :span="8">
                                                                <el-form-item label="品牌">
                                                                    <el-select v-model="form.brandId" clearable placeholder="请选择" style="width: 100%">
                                                                        <el-option
                                                                                v-for="item in brandOptions"
                                                                                :key="item.id"
                                                                                :label="item.name"
                                                                                :value="item.id">
                                                                        </el-option>
                                                                    </el-select>
                                                                </el-form-item>
                                                            </el-col>
                                                        </el-row>

                                                        <el-row :gutter="20">
                                                            <el-col :span="8">
                                                                <el-form-item label="内容类型">
                                                                    
                                                                </el-form-item>
                                                            </el-col>
                                                            <el-col :span="8">
                                                                <el-form-item label="发布时间">
                                                                    
                                                                </el-form-item>
                                                            </el-col>
                                                            <el-col :span="8">
                                                                <el-form-item label="归档日期">
                                                                    
                                                                </el-form-item>
                                                            </el-col>
                                                        </el-row>

                                                        <el-form-item label="商品主图">
                                                            <el-upload
                                                                :action="UPLOAD_URL"
                                                                :data="uploadData"
                                                                :limit="limit"
                                                                list-type="picture-card"
                                                                :file-list="masterImage"
                                                                :on-change="handleOnChangeUpload"
                                                                :on-preview="handlePictureCardPreviewMaster"
                                                                :on-remove="handleRemoveMaster"
                                                                :on-success="hanldeUploadSuccessMaster"
                                                                >
                                                                <i class="el-icon-plus"></i>
                                                            </el-upload>
                                                            <el-dialog :visible.sync="dialogVisibleMaster">
                                                                <img width="100%" :src="dialogImageUrlMaster" alt="">
                                                            </el-dialog>
                                                        </el-form-item>

                                                        <el-form-item label="商品图片">
                                                            <el-upload
                                                                :action="UPLOAD_URL"
                                                                :data="uploadData"
                                                                :multiple="multiple"
                                                                list-type="picture-card"
                                                                :file-list="slaveImages"
                                                                :on-preview="handlePictureCardPreview"
                                                                :on-remove="handleRemove"
                                                                :on-success="hanldeUploadSuccess"
                                                                >
                                                                <i class="el-icon-plus"></i>
                                                            </el-upload>
                                                            <el-dialog :visible.sync="dialogVisible">
                                                                <img width="100%" :src="dialogImageUrl" alt="">
                                                            </el-dialog>
                                                        </el-form-item>

                                                        <el-form-item label="商品详情" class="detail">
                                                            <tinymce :height="300" v-model="content" />
                                                        </el-form-item>

                                                    </el-form>
                                                </el-col>
                                            </el-row>
                                        </el-tab-pane>
                                        <el-tab-pane label="规格配置" name="second">
                                            <el-row class="body">
                                                <el-col>
                                                   
                                                    <template v-if="!form.categoryId">
                                                        <el-alert
                                                            title="未设置商品分类"
                                                            type="warning"
                                                            show-icon
                                                            :closable="false">
                                                        </el-alert>
                                                    </template>
                                                    <template v-else>
                                                        <el-row v-for="(item, key) in specListChceckbox" :key="key" style="margin-bottom: 20px;">
                                                            <el-col :span="2">
                                                                {{item.name}}
                                                            </el-col>
                                                            <el-col :span="22">
                                                                <!-- 动态分组，动态创建data属性数据 -->
                                                                <el-checkbox-group v-model="checkedModelCheckbox['ChceckGroup-'+item.id]" @change="handleCheckedSpecChangeCheckbox">
                                                                    <el-checkbox :label="key+`[:]`+val.id+`[:]`+val.specValue" v-for="(val, index) in item.values" :key="index" style="margin-left: 0;margin-right: 20px;">
                                                                        {{val.specValue}}
                                                                    </el-checkbox>
                                                                </el-checkbox-group>
                                                            </el-col>
                                                        </el-row>
                                                        <el-row style="margin-bottom: 20px;">
                                                            <el-col>
                                                                <el-table
                                                                    :data="checkSkuList"
                                                                    :span-method="objectSpanMethod"
                                                                    border>
                                                                    <el-table-column label="规格" align="center">
                                                                        <template slot-scope="scope"> {{ scope.row.specAttrName }} </template>
                                                                    </el-table-column>
                                                                    <el-table-column label="规格值" align="center">
                                                                        <template slot-scope="scope"> {{ scope.row.specValue }} </template>
                                                                    </el-table-column>
                                                                    <el-table-column label="价格" align="center">
                                                                        <template slot-scope="scope"> 
                                                                            <el-input-number style="width: 100%;" v-model="scope.row.price" controls-position="right" :min="0"></el-input-number>
                                                                        </template>
                                                                    </el-table-column>
                                                                    <el-table-column label="数量" align="center">
                                                                        <template slot-scope="scope"> 
                                                                            <el-input-number style="width: 100%;" v-model="scope.row.total" controls-position="right" :min="0"></el-input-number>
                                                                        </template>
                                                                    </el-table-column>
                                                                </el-table>
                                                            </el-col>
                                                        </el-row>


                                                        <el-row>
                                                            <el-col>
                                                                <el-button type="primary" @click="handleSKUGroup">组合</el-button>
                                                                <el-button type="primary" @click="handleSKUGroupClear">不选</el-button>
                                                            </el-col>
                                                        </el-row>
                                                        <el-row v-for="(item, key) in specListRadio" :key="key+'-radio-row'" style="margin-bottom: 20px;">
                                                            <el-col :span="2"> {{item.name}} </el-col>
                                                            <el-col :span="22">
                                                                <!-- 动态分组，动态创建data属性数据 -->
                                                                <el-radio-group v-model="checkedModelRadio['RadioGroup-'+item.id]" @change="handleCheckedSpecChangeRadio">
                                                                    <el-radio :label="key+`[:]`+item.id+`[:]`+item.name+`[:]`+val.id+`[:]`+val.specValue" v-for="(val, index) in item.values" :key="index" style="margin-left: 0;margin-right: 20px;">
                                                                        {{val.specValue}}
                                                                    </el-radio>
                                                                </el-radio-group>
                                                            </el-col>
                                                        </el-row>
                                                        <el-row style="margin-bottom: 20px;">
                                                            <el-col>
                                                                <el-table
                                                                    :data="specSkuGroupList"
                                                                    border>

                                                                    <el-table-column label="" width="50" align="center">
                                                                        <template slot-scope="scope">
                                                                            <i class="el-icon-delete remove-sku" @click="handleRemoveSku(scope.row, scope.$index)"></i>
                                                                        </template>
                                                                    </el-table-column>
                                                                    <el-table-column label="SKU销售组合" align="center">
                                                                        <template slot-scope="scope">
                                                                            <div class="sku-group" v-for="(item, index) in scope.row.sku" :key="index+`-table`">
                                                                                <div class="name">{{item.specAttrName}}</div>
                                                                                <div class="value">{{item.specValue}}</div>
                                                                            </div>
                                                                        </template>
                                                                    </el-table-column>
                                                                    
                                                                    <el-table-column label="价格" align="center">
                                                                        <template slot-scope="scope"> 
                                                                            <el-input-number style="width: 100%;" v-model="scope.row.price" :min="0"></el-input-number>
                                                                        </template>
                                                                    </el-table-column>
                                                                    <el-table-column label="数量" align="center">
                                                                        <template slot-scope="scope"> 
                                                                            <el-input-number style="width: 100%;" v-model="scope.row.total" :min="0"></el-input-number>
                                                                        </template>
                                                                    </el-table-column>
                                                                    
                                                                </el-table>
                                                            </el-col>
                                                        </el-row>

                                                        
                                                        
                                                    </template>
                                                    
                                                </el-col>
                                            </el-row>
                                            

                                        </el-tab-pane>
                                    </el-tabs>
                                </el-col>
                                <el-col :span="6">
                                    <div class="title"></div>
                                    <el-row class="margin-bottom-10">
                                        <el-col>
                                            <el-card class="box-card" style="margin-top: 12px">
                                                <div slot="header" class="clearfix">
                                                    <span class="card-header"><i class="el-icon-search"></i> 发布</span>
                                                </div>
                                                <el-row class="publish-card">
                                                    <el-col>

                                                        <el-row class="margin-bottom-20">
                                                            <el-col>
                                                                <span class="text">状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态：</span>
                                                                <el-select v-model="form.status" placeholder="请选择" size="small">
                                                                    <el-option
                                                                            v-for="item in statusOptions"
                                                                            :key="item.value"
                                                                            :label="item.label"
                                                                            :value="item.value"
                                                                            >
                                                                    </el-option>
                                                                </el-select>
                                                            </el-col>
                                                        </el-row>

                                                        <el-row class="margin-bottom-20">
                                                            <el-col>
                                                                <span class="text">排&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;序：</span>
                                                                <el-input-number v-model="form.sort" :min="1" :max="999999" size="small" style="width: 200px"></el-input-number>
                                                            </el-col>
                                                        </el-row>

                                                        <el-row class="footer">
                                                            <el-col>
                                                                <el-button v-if="this.params.goodsId == null" @click="handleCreate('form')" type="primary" size="small" icon="el-icon-search">提 交</el-button>
                                                                <el-button v-if="this.params.goodsId != null" @click="handleUpdate('form')" type="primary" size="small" icon="el-icon-search">修 改</el-button>
                                                                <el-button plain type="info" size="small" @click="hanldePreview">预 览</el-button>
                                                            </el-col>
                                                        </el-row>

                                                    </el-col>
                                                </el-row>

                                            </el-card>
                                        </el-col>
                                    </el-row>

                                    <el-row class="margin-bottom-10">
                                        <el-col>
                                            <el-card class="box-card">
                                                <div slot="header" class="clearfix">
                                                    <span>分类</span>
                                                </div>
                                                <div v-for="o in 4" :key="o" class="text item">
                                                    {{'列表内容 ' + o }}
                                                </div>
                                            </el-card>
                                        </el-col>
                                    </el-row>

                                    <el-row class="margin-bottom-10">
                                        <el-col>
                                            <el-card class="box-card">
                                                <div slot="header" class="clearfix">
                                                    <span>标签</span>
                                                </div>
                                                <div v-for="o in 4" :key="o" class="text item">
                                                    {{'列表内容 ' + o }}
                                                </div>
                                            </el-card>
                                        </el-col>
                                    </el-row>
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                    
                </el-col>
            </el-row>

            <back></back>
            <back-to-top></back-to-top>
        </div>
    </div>
</template>

<script>
    import { created, updated, deleted, selectOne, selectList, selectPage, UPLOAD_URL, selectOneAllById } from '@/api/mall/Goods'
    import { selectTree as selectTreeCategory } from '@/api/mall/GoodsCategory'
    import { selectSpecAttrAndValue } from "@/api/mall/GoodsSpecAttr";
    import { selectList as selectListBrand } from '@/api/mall/GoodsBrand'
    import { selectList as selectListType } from '@/api/mall/GoodsType'
    import { selectList as selectListTags } from '@/api/mall/GoodsTags'
    import { deleted as deletedImage } from '@/api/mall/GoodsImages'
    import { removeByValue } from '@/libs/utils'
    import { ResultMessage } from '@/libs/response'
    import { isAuth } from "@/libs/auth";
    import Back from "@/components/Back";
    import BackToTop from "@/components/BackToTop";
    import Tinymce from "@/components/Tinymce";
    import valid from '@/libs/rules'

    const statusOptions = [{ value: 0, label: '未上架' }, { value: -1, label: '下架' }, { value: 1, label: '上架' }, { value: 2, label: '预售' }]

    export default {
        name: 'AddGoods',
        components: {
            Back, BackToTop, Tinymce
        },
        data() {
            let required = valid.required('此项必填')
            return {
                /**
                 * goodsId
                 */
                params: this.$route.query, //前一个页面带过来的数据
                loading: false,
                loadingGetTags: false,
                statusOptions,
                activeName: 'second',
                form: {
                    name: null,
                    categoryId: null,
                    categoryIds: null,
                    sketch: null,
                    intro: null,
                    keywords: null,
                    tagIds: null,
                    marque: null,
                    barcode: null,
                    price: null,
                    marketPrice: null,
                    stock: null,
                    pictureUrl: null,
                    status: 0,
                    state: 0,
                    sort: 99,
                    goodsImages: [],
                    skuList: []
                },
                content: null,
                images: [],

                specListRadio: [],          //根据商品分类加载规格和规格值
                checkedModelRadio: {},      //动态创建属性
                specSkuGroupList: [],       //SKU销售组合

                specListChceckbox: [],      //根据商品分类加载规格和规格值
                checkedModelCheckbox: {},   //动态创建属性
                checkSkuList: [],           //选中的规格和值

                tagOptions: [],
                categoryIds: [],
                categoryOptions: [],
                brandOptions: [],
                typeOptions: [],
                defaultProps: {
                    label: "name",
                    value: "id",
                    children: "children"
                },

                

                dialogImageUrlMaster: '',
                dialogVisibleMaster: false,
                dialogImageUrl: '',
                dialogVisible: false,
                limit: 1,
                multiple: true,
                UPLOAD_URL,
                uploadData: {
                    ossName: 'qiniuyun',
                    bucketName: 'test',
                },

                masterImage: [],
                slaveImages: [],

                rules: {
                    name: [required]
                }
            }
        },
        
        created() {
            this.getGoodsCategory()
            this.getGoodsBrand()
            this.getGoodsType()
            this.getGoodsTags()

            //编辑商品数据
            if(this.params.goodsId) {
                this.getGoodsData(this.params.goodsId)
            }
        },

        methods: {
            
            handleClick(tab, event) { //Tabs点击
            },

            handleCreate(formName) { //添加商品
                //图片列表
                let imageList = []
                for(let item of this.images) {
                    if(item.response.flag) {
                        imageList.push({pictureUrl: item.response.data.url})
                    }
                }
                this.form.goodsImages = imageList

                //规格
                this.form.skuList = this.checkSkuList
                //商品描述
                this.form.intro = this.content

                console.log(this.form)

                
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        created(this.form).then(response => {
                            if(ResultMessage(response)) {
                            } else {
                            }
                        }).catch(error => {
                            this.$notify({
                                title: '提示', message: '添加失败',
                                type: 'error', duration: 2000
                            })
                        })
                    }
                })
            },
            
            handleUpdate(formName) { //修改商品
            
                const set = this.$refs
                set[formName].validate((valid) => {
                    if (valid) {
                        //商品描述
                        this.form.intro = this.content

                        //图片列表
                        if(this.images.length > 0) {
                            let imageList = []
                            for(let item of this.images) {
                                if(item.response) {
                                    if(item.response.flag) {
                                        imageList.push({pictureUrl: item.response.data.url})
                                    }
                                } else {
                                    imageList.push({pictureUrl: item.url})
                                }
                            }
                            this.form.goodsImages = imageList
                        }

                        updated(this.form).then(response => {
                            if(ResultMessage(response)) {
                                console.log(response.data)
                            }
                        }).catch(error => {
                            this.$notify({
                                title: '提示', message: '修改失败',
                                type: 'error', duration: 2000
                            })
                        })
                    }
                })
            },

            hanldePreview() { //预览
                for(let item of this.checkSkuList) {
                    console.log(JSON.stringify(item))
                }
                for(let item of this.specSkuGroupList) {
                    console.log(JSON.stringify(item))
                }
            },

            getGoodsData(id) { //根据ID加载商品信息
                this.getData(id).then(response => {
                    if(response) {
                        this.form = Object.assign({}, response.data.data, {tagIds: []})
                        //商品主图
                        if(this.form.pictureUrl) {
                            this.masterImage = [{name: 'goods_master', url: this.form.pictureUrl}]
                        }
                        //图片列表
                        if(this.form.goodsImages) {
                            for(let item of this.form.goodsImages) {
                                this.slaveImages.push({name: 'GoodsImageList-'+item.id, id: item.id, url: item.pictureUrl})
                            }
                            
                        }
                        //标签
                        if(this.form.tags) {
                            for(let item of this.form.tags) {
                                this.form.tagIds.push(item.id)
                            }
                        }
                        //商品描述
                        this.content = this.form.intro
                        //商品分类
                        if(this.form.categoryIds) {
                            this.categoryIds = []
                            //内容分类,将IDS字符串转换为int数组
                            const categoryIdsStr = this.form.categoryIds.split(',')
                            for(let str of categoryIdsStr) {
                                this.categoryIds.push(parseInt(str))
                            }

                            //加载规格
                            if(this.categoryIds.length > 0) { 
                                this.handleChangeCascader(this.categoryIds)
                            }
                        }
                    }
                })
            },

            getData(id) { //根据ID查询商品
                this.listLoading = true
                return selectOneAllById(id).then(response => {
                    if(ResultMessage(response, false)) {
                        this.listLoading = false
                        return response
                    } else {
                        this.listLoading = false
                        return null
                    }

                }).catch(error => {
                    this.$notify({
                        title: '提示', message: '根据ID获取数据失败',
                        type: 'error', duration: 2000
                    })
                    this.listLoading = false
                })
            },

            /* 获取商品分类 */
            getGoodsCategory() {
                selectTreeCategory().then((response) => {
                    this.categoryOptions = response.data.data
                })
            },
            handleChangeCascader(value) { //商品分类下拉框选中
                this.checkedModelCheckbox = {}
                this.checkSkuList = []

                if(value.length > 0) {
                    this.form.categoryId = value[value.length -1]
                    this.form.categoryIds = value.join(',')
                    this.getGoodsSpecAttrAndValue()
                } else {
                    this.form.categoryId = null
                    this.form.categoryIds = null
                }
            },

            /* 获取规格 */
            getGoodsSpecAttrAndValue() {
                selectSpecAttrAndValue(this.form.categoryId).then((response) => {
                    this.specListRadio = response.data.data
                    this.specListChceckbox = response.data.data
                    
                    //checkbox 动态分组，通过$set来动态新增data属性
                    for(let item of this.specListChceckbox) {
                        //this.$set(this.checkedModelCheckbox, key, value)
                        //给checkedModelCheckbox对象动态创建3个字对象，值未数组
                        this.$set(this.checkedModelCheckbox, 'ChceckGroup-'+item.id, [])
                        this.$set(this.checkedModelRadio, 'RadioGroup-'+item.id, {})
                    }
                })
            },

            handleCheckedSpecChangeRadio(value) { //单选框选中
                console.log(value)
            },
            handleSKUGroupClear() {
                console.log(this.checkedModelRadio)
                for(let radioKey of Object.keys(this.checkedModelRadio)) {
                    this.checkedModelRadio[radioKey] = {}
                }
                console.log(this.checkedModelRadio)
            },
            handleSKUGroup() { //SKU销售组合按钮
                let SkuTableData = []
                for(let value of Object.values(this.checkedModelRadio)) {
                    if(value.length !== undefined) {
                        //['规格索引', '规格ID', '规格名称', '规格值ID', '规格值']
                        const split = value.split('[:]') ;
                        const index = split[0]
                        const specAttrId = split[1]
                        const specAttrName = split[2]
                        const specValueId = split[3]
                        const specValue = split[4]

                        SkuTableData.push({specAttrId, specAttrName, specValueId, specValue})
                    }
                }
                if(SkuTableData.length > 0) {
                    this.specSkuGroupList.push({sku: SkuTableData, price: 0, total: 0})
                    console.log(JSON.stringify(this.specSkuGroupList))  
                }
            },
            handleRemoveSku(row, index) { //删除指定SKU组合销售
                this.specSkuGroupList.findIndex((value, i, arr) => {
                    if(index === i) {
                        this.specSkuGroupList.splice(i, 1)
                        return true
                    }
                })
            },
            handleCheckedSpecChangeCheckbox(value) { //规格选项框选中或不选
                let res = []
                for(let key of Object.keys(this.checkedModelCheckbox)) {
                    if(this.checkedModelCheckbox[key].length > 0) {
                        let ii = 0;
                        for(let spec of this.checkedModelCheckbox[key]) {
                            //规格ID
                            const specAttrId = key.split('-')[1]
                            //['规格索引', '规格值ID', '规格值']
                            const checkedValArr = spec.split('[:]')
                            
                            //规格名称
                            let specAttrName = this.specListChceckbox[checkedValArr[0]].name
                            let specValueId = checkedValArr[1]
                            let specValue = checkedValArr[2]

                            res.push({
                                specAttrId,
                                specAttrName,
                                specValueId,
                                specValue,
                                price: 0,
                                total: 0
                            })
                            ii++
                        }
                    }
                }
                this.checkSkuList = res
                //console.log(this.checkSkuList);
                
                //计算合并行数
                this.getSpanArr(this.checkSkuList)
            },
            getSpanArr(data) {  //因为要合并的行数是不固定的，此函数是实现合并随意行数的功能
                this.spanArr = []
                for (var i = 0; i < data.length; i++) {
                    if (i === 0) {
                        // 如果是第一条记录（即索引是0的时候），向数组中加入１
                        this.spanArr.push(1)
                        this.pos = 0
                    } else {
                        if (data[i].specAttrId === data[i - 1].specAttrId) {
                            // 如果specAttrId相等就累加，并且push 0
                            this.spanArr[this.pos] += 1
                            this.spanArr.push(0)
                        } else {
                            // 不相等push 1
                            this.spanArr.push(1)
                            this.pos = i
                        }
                    }
                }
            },
            objectSpanMethod({ row, column, rowIndex, columnIndex }) { //合并行数
                if (columnIndex === 0) {
                    const _row = this.spanArr[rowIndex]
                    const _col = _row > 0 ? 1 : 0
                    return {
                        rowspan: _row,
                        colspan: _col
                    }
                }
            },

             /* 获取商品品牌 */
            getGoodsBrand() {
                selectListBrand().then((response) => {
                    this.brandOptions = response.data.data
                })
            },
            /* 获取商品类型 */
            getGoodsType() {
                selectListType().then((response) => {
                    this.typeOptions = response.data.data
                })
            },

            /* 获取商品标签 */
            getGoodsTags(params) {
                return selectListTags(params).then(response => {
                    this.tagOptions = response.data.data
                })
            },
            /* 变更tags */
            handleChangeTags(values) {
                console.log(values)
            },
            /* 远程搜索Tags */
            remoteMethod(query) {
                if (query !== '') {
                    this.loadingGetTags = true;
                    this.getGoodsTags({name: query}).then(() => {
                        this.loadingGetTags = false;
                    })
                } else {
                    this.tagOptions = [];
                }
            },

            /* 上传商品主图 */
            handleOnChangeUpload(file, fileList) { //添加文件、上传成功和上传失败时都会被调用
            },
            handleRemoveMaster(file, fileList) { //移除图片
                this.form.pictureUrl = ''
            },
            handlePictureCardPreviewMaster(file) { //预览图片
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            hanldeUploadSuccessMaster(response, file, fileList) { //图片上传成功
                this.form.pictureUrl = response.data.url
                if(response.flag == false) {
                    this.$notify({
                        type: 'error',
                        title: '文件上传失败',
                        message: file.name,
                        duration: 2000,
                    });
                }
            },

            /* 上传商品图片 */
            handleRemove(file, fileList) {
                this.images = fileList

                deletedImage({idList: [file.id]}).then(response => {
                    ResultMessage(response)
                }).catch(error => {
                    this.$notify({
                        title: '提示', message: '删除失败',
                        type: 'error', duration: 2000
                    })
                })
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            hanldeUploadSuccess(response, file, fileList) {
                this.images = fileList

                if(!response.flag) {
                    this.$notify({
                        type: 'error',
                        title: '文件上传失败',
                        message: file.name,
                        duration: 2000,
                    });
                }
            }
        }
    }

    /* const hasChild = (item) => {
        return item.children && item.children.length !== 0
    }
    const getCategoryById = (list) => {
        let res = []
        for(let item of list) {
            let obj = {
                id: item.id,
                pid: item.pid,
                name: item.name,
            }
            if (hasChild(item)) {
                obj.children = getCategoryById(item.children)
            }

            res.push(obj)
        }
        
        return res
    } */
</script>

<style rel="stylesheet/scss" lang="scss">
.detail{
    .el-form-item__content{
        line-height: 0px;
    }
}
.el-tabs__item{
    height: 50px;
    line-height: 50px;
}

</style>

<style rel="stylesheet/scss" lang="scss" scoped>
    @import "../../../../assets/styles/common";
    
    .add_goods {
        padding: 10px 0;
        border: 1px solid #e8eaec;
        background: #fff;
        border-radius: 4px;
        font-size: 14px;
        position: relative;
        transition: all 0.2s ease-in-out;
        &:hover {
            border-color: #eee;
            box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
        }
        .title {
            height: 48px;
            line-height: 40px;
            padding-left: 10px;
            border-bottom: 2px solid #e4e7ed;
            margin-bottom: 10px;
        }

        .body{
            padding: 10px 20px 10px 10px;
            background: #fff;
            border-radius: 4px;
            font-size: 14px;
            position: relative;
            transition: all 0.2s ease-in-out;
        }

        .sku-group{
            display: flex;
            .name{ 
                flex: 1 0;
            }
            .value{ 
                flex: 1 0;
            }
        }
        .remove-sku{
            cursor: pointer;
        }
    }
    
        
        
</style>